<!--
 * @Author: yanyufengqing 1624478125@qq.com
 * @Date: 2025-10-03 17:45:20
 * @LastEditors: yanyufengqing 1624478125@qq.com
 * @LastEditTime: 2025-10-03 17:45:26
 * @FilePath: \manage-system\src\components\Navigation.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="navigation">
    <el-menu mode="horizontal" router>
      <el-menu-item index="/">
        <el-icon><House /></el-icon>
        <span>首页</span>
      </el-menu-item>
      <el-menu-item index="/about">
        <el-icon><User /></el-icon>
        <span>关于</span>
      </el-menu-item>
      <el-menu-item index="/button">
        <el-icon><Pointer /></el-icon>
        <span>按钮</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
// 使用 Element Plus 内置图标
const House = () => h('i', { class: 'el-icon-house' })
const User = () => h('i', { class: 'el-icon-user' })
const Pointer = () => h('i', { class: 'el-icon-pointer' })
import { h } from 'vue'
</script>

<style scoped>
.navigation {
  margin-bottom: 20px;
}
</style>